﻿@{
    ViewBag.Title = "角色管理";
}
@section script{
    <script src="~/Content/FlatLab/js/bootstrap-switch.js"></script>
<script src="~/Content/FlatLab/js/ga.js"></script>
    <script>
        function viewModel() {
            var self = this;

            // 添加
            self.create = function () {
                this.edit(null);
            }
            // 删除
            self.remove = function (role) {
                layer.confirm('确定删除该角色吗？', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        url: "/ManageArea/Home/DelRole/" + role.Id,
                        type: "post",
                        dataType: "json",
                        success: function (json) {
                            layer.msg('删除成功', { icon: 1 });
                            self.users.remove(role);
                            layer.close(index);
                        }
                    })
                });
            }
            // 编辑
            self.edit = function (role) {
                var id = role == null ? '' : role.Id;
                $.get('/ManageArea/Home/CreateOrEditRole', { id: id }, function (data) {
                    layer.open({
                        type: 1,
                        title: id == '' ? '添加用户' : '编辑用户',
                        shade: 0.2,
                        btn: ['保存', '关闭'],
                        yes: function (index, layerno) {
                            vm.editRole.errors = ko.validation.group(vm.editRole);
                            if (vm.editRole.isValid()) {
                                var ajaxFormOption = {
                                    success: function (res) {
                                        if (res.Code == 0) {
                                            layer.msg('保存成功', { icon: 1 });
                                            init(true);
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.ErrMsg, { icon: 2 });
                                        }
                                    },
                                    error: function (XMLResponse) {
                                        layer.msg("加载信息失败", { icon: 2 });
                                    }
                                };
                                $("#formRole").ajaxSubmit(ajaxFormOption);
                            } else {
                                vm.editRole.errors.showAllMessages();
                            }
                        },
                        no: function (index, layerno) {
                            layerno.close();
                        },
                        success: function (layero, index) {
                            var um = new roleModel(roleInfo);
                            vm.editRole = ko.observable(um);
                            var dom = $('.layui-layer-page')[0];
                            ko.applyBindings(vm.editRole, dom);
                        },
                        area: ['500px', '400px'],
                        content: data
                    });
                });
            };
        }

        function roleModel(data) {
            var self = this;
            self.Id = ko.observable(data.Id);

            self.RoleName = ko.observable(data.RoleName).extend({
                required: { params: true, message: "请输入角色名称" },
            });

            self.RoleDesc = ko.observable(data.RoleDesc);

            self.Status = ko.observable(data.Status);
        }

        function datefomatter(date) {
            var da = new Date(parseInt(date.replace("/Date(", "").replace(")/", "").split("+")[0]));
            return da.getFullYear() + "-" + (da.getMonth() + 1) + "-" + da.getDate() + " " + da.getHours() + ":" +
                da.getSeconds() + ":" + da.getMinutes();
        }



        var vm = new viewModel();

        function init(obj) {
            $.get('/ManageArea/Home/RoleList', null, function (data) {
                if (!obj) {
                    vm.roles = ko.observableArray(data);//添加动态监视数组对象
                    ko.applyBindings(vm);
                } else {
                    vm.roles.replace(vm.roles, ko.observableArray(data));//添加动态监视数组对象
                }
                
            }, 'json');
        }

        init(false);

    </script>
}
<div class="row">
    <div class="col-sm-12">
        <section class="panel">
            <header class="panel-heading">
                角色列表
                <span class="pull-right">
                    <button type="button" class="btn btn-primary" data-bind="click:$root.create"><i class="icon-plus"></i> 添加角色</button>
                </span>
            </header>
            <table class="table">
                <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: roles">
                    <tr>
                        <td data-bind="text: RoleName"></td>
                        <td data-bind="text: RoleDesc"></td>
                        <td class="center" data-bind="text: datefomatter(CreateDate)"></td>
                        <td class="center" data-bind="text: Status">
                            <span class="label label-important" data-bind="text: Status"></span>
                        </td>
                        <td class="center">
                            <a class="btn btn-success" href="#">
                                <i class="icon-zoom-in"></i>
                                查看
                            </a>
                            <a class="btn btn-info" href="#" data-bind="click:$root.edit">
                                <i class="icon-edit"></i>
                                编辑
                            </a>
                            <a class="btn btn-danger" href="#" data-bind="click:$root.remove">
                                <i class="icon-trash"></i>
                                删除
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</div>
